<template>
  <div>
    <Row>
      <Col :lg="24" :md="24">
        <Card>
          <div class="box">
            <div class="easy-computer1">
              <div class="flex" style="width:14%">
                <span>编号</span>
                <span>名称</span>
              </div>
              <Row class="flex" style="width:40%">
                <Col>
                  <Input v-model="form.sn" type="text" class="box-input" />
                </Col>
                <Col>
                  <Input v-model="form.name" type="text" class="box-input" />
                </Col>
                <Col>
                  <Select
                    v-model="form.environmentId"
                    class="box-input"
                    placeholder="请选择环境"
                  >
                    <Option
                      :value="it.id"
                      v-for="it in dataArray.environment"
                      :key="it.id"
                      >{{ it.sn }}</Option
                    >
                  </Select>
                </Col>
                <Col>
                  <Select v-model="form.roadId" placeholder="请选择路面">
                    <Option
                      :value="it.id"
                      v-for="it in dataArray.road"
                      :key="it.id"
                      >{{ it.name }}</Option
                    >
                  </Select>
                </Col>
              </Row>

              <div class="box-item2">
                <Select
                  v-model="form.bodyId"
                  placeholder="请选择车身"
                  class="box-input"
                >
                  <Option
                    :value="it.id"
                    v-for="it in dataArray.body"
                    :key="it.id"
                    >{{ it.sn }}</Option
                  >
                </Select>
              </div>
              <Row class="flex box-item12">
                <Col :span="2" :pull="4">
                  <Select
                    style="width:10em"
                    v-model="form.engineId"
                    placeholder="请选择发动机"
                  >
                    <Option
                      :value="it.id"
                      v-for="it in dataArray.engine"
                      :key="it.id"
                      >{{ it.sn }}</Option
                    >
                  </Select>
                </Col>
                <Col :span="2" :pull="6">
                  <Select
                    style="width:10em"
                    v-model="form.generatorId"
                    placeholder="请选择变速箱"
                  >
                    <Option
                      :value="it.id"
                      v-for="it in dataArray.gearbox"
                      :key="it.id"
                      >{{ it.sn }}</Option
                    >
                  </Select>
                </Col>
                <Col :span="4" :push="4">
                  <Card>
                    <p slot="title">主减</p>
                    <p>
                      速比<Input
                        v-model="form.speedRatio"
                        type="number"
                        class="box-input"
                      />
                    </p>
                    <p>
                      效率<Input
                        v-model="form.efficiency"
                        type="number"
                        class="box-input"
                      />
                    </p>
                  </Card>
                </Col>
              </Row>
              <div class="flex box-item4">
                <Button @click="compute">计算</Button>
                <Button @click="save">保存</Button>
                <Button @click="exportAll">导出</Button>
              </div>
            </div>
          </div>
        </Card>
      </Col>
    </Row>
    <Row class="flex">
      <Col :lg="4">
        <Card>
          <List header="计算结果记录" class="box">
            <ListItem
              class="list-button"
              v-for="item in resultList"
              :key="item"
            >
              <div
                class="flex"
                style="width:100%"
                @click="changeIndexModel(item)"
              >
                <span>{{ item.form.sn }}</span>

                <span>{{ item.result.createTime }}</span>
              </div>
            </ListItem>
          </List>
        </Card>
      </Col>
      <Col :lg="20" :md="24">
        <Card>
          <div class="box">
            <div class="easy-computer2">
              <div class="input-box">
                <div class="flex box-item11 ">
                  <div class="span"><span>挡位</span></div>
                  <div class="span"><span>风速</span></div>
                </div>
                <div class="flex box-item11 margin0">
                  <Input
                    v-model="result.gear"
                    type="number"
                    class="box-input"
                  /><Input
                    v-model="result.windSpeed"
                    type="number"
                    class="box-input"
                  >
                    <span slot="append">km/h</span></Input
                  >
                </div>
                <div class="flex box-item5">
                  <div class="span"><span>车重</span></div>
                  <div class="span"><span>驱动力</span></div>
                </div>
                <div class="flex box-item5 ">
                  <Input
                    v-model="result.weight"
                    type="number"
                    class="box-input"
                    disabled
                  >
                    <span slot="append">kg</span></Input
                  ><Input
                    v-model="result.drive"
                    type="number"
                    class="box-input"
                    disabled
                  >
                    <span slot="append">N</span></Input
                  >
                </div>
                <div class="flex box-item6">
                  <div class="span"><span>动力因数</span></div>
                </div>
                <div class="flex box-item6 margin0">
                  <Input
                    v-model="result.dynamicFactor"
                    type="number"
                    class="box-input"
                    disabled
                  />
                </div>
                <div class="flex box-item7">
                  <div class="span"><span>风阻</span></div>
                  <div class="span"><span>最高车速</span></div>
                </div>
                <div class="flex box-item7 margin0">
                  <Input
                    v-model="result.windResistance"
                    type="number"
                    class="box-input"
                    disabled
                  >
                    <span slot="append">N</span></Input
                  ><Input
                    v-model="result.maximumSpeed"
                    type="number"
                    class="box-input"
                    disabled
                  >
                    <span slot="append">km/h</span></Input
                  >
                </div>
                <div class="flex box-item8">
                  <div class="span"><span>滚阻</span></div>
                  <div class="span"><span>发动机转速</span></div>
                </div>
                <div class="flex box-item8 margin0">
                  <Input
                    v-model="result.rollResistance"
                    type="number"
                    class="box-input"
                    disabled
                  >
                    <span slot="append">N</span></Input
                  ><Input
                    v-model="result.engineSpeed"
                    type="number"
                    class="box-input"
                    disabled
                  >
                    <span slot="append">rpm</span></Input
                  >
                </div>
                <div class="flex box-item9">
                  <div class="span"><span>坡道阻力</span></div>
                  <div class="span" style="margin-left: 120px;">
                    <span>坡度</span>
                  </div>
                  <div class="span"><span>前轴荷</span></div>
                  <div class="span"><span>发动机扭矩</span></div>
                </div>
                <div class="flex box-item9 margin0">
                  <Input
                    v-model="result.rampResistance"
                    type="number"
                    class="box-input"
                    disabled
                  >
                    <span slot="append">N</span></Input
                  ><Input
                    v-model="result.slope"
                    type="number"
                    class="box-input"
                    style="margin-left:120px;"
                  >
                    <span slot="append">%</span></Input
                  ><Input
                    v-model="result.frontAxleLoad"
                    type="number"
                    class="box-input"
                    disabled
                  >
                    <span slot="append">N</span></Input
                  ><Input
                    v-model="result.engineTorque"
                    type="number"
                    class="box-input"
                    disabled
                  >
                    <span slot="append">Nm</span></Input
                  >
                </div>
                <div class="flex box-item10">
                  <div class="span"><span>后轴荷</span></div>
                </div>
                <div class="flex box-item10 margin0">
                  <Input
                    v-model="result.rearAxleLoad"
                    type="number"
                    class="box-input"
                    disabled
                  />
                </div>
              </div>
            </div>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import { easyComputeResultApi } from "@/api/easy-compute-result";
import { easyComputeModelApi } from "@/api/easy-compute-model";
import { bodyApi } from "@/api/body";
import { engineApi } from "@/api/engine";
import { gearboxApi } from "@/api/gearbox";
import { roadApi } from "@/api/road";
import { environmentApi } from "@/api/environment";
export default {
  name: "Home",
  components: {},
  props: {},
  data() {
    return {
      form: {
        sn: null,
        // 名称
        name: null,
        // 环境id
        environmentId: null,
        // 路面id
        roadId: null,
        // 车身id
        bodyId: null,
        // 发动机id
        engineId: null,
        // 变速箱id
        generatorId: null,
        // 速度比
        speedRatio: null,
        // 效率
        efficiency: null
      },
      result: {
        // 模型id
        modelId: null,
        // 挡位
        gear: null,
        // 风速
        windSpeed: null,
        // 车重
        weight: null,
        // 驱动力
        drive: null,
        // 动力因数
        dynamicFactor: null,
        // 风阻
        windResistance: null,
        // 最高车速
        maximumSpeed: null,
        // 滚阻
        rollResistance: null,
        // 发动机转速
        engineSpeed: null,
        // 坡道阻力
        rampResistance: null,
        // 坡度
        slope: null,
        // 前轴荷
        frontAxleLoad: null,
        // 发动机扭矩
        engineTorque: null,
        // 后轴荷
        rearAxleLoad: null
      },
      dataArray: {
        road: [],
        environment: [],
        body: [],
        engine: [],
        gearbox: []
      },
      resultList: []
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {
    this.getDataArray();
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    changeIndexModel(data) {
      this.form = data.form;
      this.result = data.result;
    },
    async compute() {
      if (!this.form.sn) {
        this.$Message.error("请输入编号");
        return;
      }
      if (!this.form.name) {
        this.$Message.error("请输入名称");
        return;
      }
      // if (!this.form.environmentId) {
      //   this.$Message.error("请选择环境");
      //   return;
      // }
      // if (!this.form.roadId) {
      //   this.$Message.error("请选择路面");
      //   return;
      // }
      // if (!this.form.bodyId) {
      //   this.$Message.error("请选择车身");
      //   return;
      // }
      // if (!this.form.engineId) {
      //   this.$Message.error("请选择发动机");
      //   return;
      // }
      // if (!this.form.generatorId) {
      //   this.$Message.error("请选择变速箱");
      //   return;
      // }
      // if (!this.form.speedRatio) {
      //   this.$Message.error("请输入速度比");
      //   return;
      // }
      // if (!this.form.efficiency) {
      //   this.$Message.error("请输入效率");
      //   return;
      // }
      this.$Spin.show();
      let res = await easyComputeModelApi.addEasyComputeModel(this.form);
      this.$Message.success(res.msg);
      if (res.code == 1) {
        this.result = res.data;
        let form = JSON.parse(JSON.stringify(this.form));
        let obj = {
          form: form,
          result: res.data
        };
        this.resultList.push(obj);
      }
      this.$Spin.hide();
    },
    async save() {
      this.$Spin.show();
      let res = await easyComputeResultApi.addEasyComputeResult(this.result);
      this.$Message.success(res.msg);

      this.$Spin.hide();
    },
    async exportAll() {
      try {
        this.allExportBtnLoading = true;
        let params = {
          pageNum: 1,
          pageSize: 100,
          sn: this.form.sn
        };

        await easyComputeModelApi.exportAll(params);
      } catch (e) {
        console.log(e);
      } finally {
        this.allExportBtnLoading = false;
      }
    },
    getDataArray() {
      let params = {
        pageNum: 1,
        pageSize: 100
      };
      roadApi.queryRoad(params).then(result => {
        this.dataArray.road = result.data.list;
      });
      environmentApi.queryEnvironment(params).then(result => {
        this.dataArray.environment = result.data.list;
      });
      gearboxApi.queryGearbox(params).then(result => {
        this.dataArray.gearbox = result.data.list;
      });
      engineApi.queryEngine(params).then(result => {
        this.dataArray.engine = result.data.list;
      });
      bodyApi.queryBody(params).then(result => {
        this.dataArray.body = result.data.list;
      });
    }
  }
};
</script>
<style>
.flex input {
  width: 100px;
}
</style>
<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input-box {
  //   padding-left: 30%;
}
.span {
  width: 100px;
  text-align: left;
}
.box {
  width: 100%;
  height: 600px;
  padding: 10px;
  padding: 0 10%;
}
.box-item2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  margin: 110px 0 0 33%;
}
.box-item4 {
  margin-top: 190px;
  width: 30%;
}

.box-item5 {
  width: 55%;
  margin-left: 45%;
}
.box-item6 {
  margin-top: 20px;
  width: 100%;
  justify-content: flex-end;
}
.box-item7 {
  margin-top: 20px;
  width: 100%;
}
.box-item8 {
  margin-top: 20px;
  width: 100%;
}
.box-item9 {
  margin-top: 110px;
  width: 100%;
}
.box-item10 {
  margin-top: 40px;
  width: 100%;
  justify-content: center;
}
.box-item11 {
  width: 60%;
  margin: 0 auto !important;
}
.box-item12 {
  margin-top: 44px;
  width: 100%;
  margin-left: 10%;
}
.margin0 {
  margin: 0;
}
.easy-computer1 {
  width: 100%;
  height: 100%;
  background: url(../../../assets/images/easy-computer1.jpg) no-repeat;
  background-size: 100% 100%;
}
.easy-computer2 {
  width: 100%;
  height: 100%;
  background: url(../../../assets/images/easy-computer2.jpg) no-repeat;
  background-size: 100% 100%;
}
.box-input {
  margin-right: 10px;
  width: 100px;
}
.text-align {
  text-align: left;
}
.list-button:hover {
  color: #2d8cf0;
  cursor: pointer;
}
</style>
